<div>
    <div class="container mx-auto flex justify-center">
        @include('frontend.includes.messages')
    </div>

    <div class="container mx-auto max-w-7xl px-4 py-10 sm:px-6">
        <div class="mb-10 md:grid md:grid-cols-3 md:gap-6">
            <div class="sm:col-span-1">
                <div class="px-4 sm:px-0">
                    <h3 class="text-xl font-semibold leading-6 text-gray-800 dark:text-gray-200">
                        @lang('Change Password')
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                        @lang('Use the following form to change your account password!')
                    </p>

                    <div class="pt-4 text-center">
                        <a href="{{ route('frontend.users.profile') }}" wire:navigate>
                            <div
                                class="w-full rounded-sm border-2 border-gray-900 px-6 py-2 text-sm font-semibold text-gray-500 transition duration-200 ease-in hover:bg-gray-800 hover:text-white focus:outline-hidden dark:border-gray-500"
                            >
                                @lang(' View Profile')
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-5 sm:col-span-2 md:mt-0">
                <form wire:submit="updatePassword">
                    <div class="mb-8 rounded-lg border bg-white p-6 shadow-lg dark:bg-gray-100">
                        <div class="grid grid-cols-6 gap-6">
                            <div class="col-span-6 sm:col-span-3">
                                <label for="password" class="block text-sm font-medium text-gray-700">
                                    @lang('Password')
                                    <span class="text-red-500">*</span>
                                </label>
                                <input
                                    wire:model="password"
                                    type="password"
                                    id="password"
                                    class="mt-1 w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-gray-700 placeholder-gray-300 shadow-sm focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-blue-600 dark:bg-gray-100"
                                    required
                                />
                                @error('password')
                                    <span class="text-sm text-red-600">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-span-6 sm:col-span-3">
                                <label for="password_confirmation" class="block text-sm font-medium text-gray-700">
                                    @lang('Confirm Password')
                                    <span class="text-red-500">*</span>
                                </label>
                                <input
                                    wire:model="password_confirmation"
                                    type="password"
                                    id="password_confirmation"
                                    class="mt-1 w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-gray-700 placeholder-gray-300 shadow-sm focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-blue-600 dark:bg-gray-100"
                                    required
                                />
                                @error('password_confirmation')
                                    <span class="text-sm text-red-600">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-span-6 bg-gray-50 px-4 py-3 text-end sm:px-6">
                                <button
                                    class="inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                    type="submit"
                                >
                                    @lang('Update Password')
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="hidden sm:block" aria-hidden="true">
            <div class="mb-10 py-4">
                <div class="border-t border-gray-200"></div>
            </div>
        </div>

        <div class="mb-10 mt-10 sm:mt-0">
            <div class="grid grid-cols-1 sm:grid-cols-3 sm:gap-6">
                <div class="md:col-span-1">
                    <div class="px-4 sm:px-0">
                        <h3 class="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
                            @lang("Edit Profile")
                        </h3>
                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                            @lang("Update account information.")
                        </p>
                    </div>
                </div>
                <div class="mt-5 sm:col-span-2 md:mt-0">
                    <div class="mb-8 rounded-lg border bg-white p-6 shadow-lg dark:bg-gray-100">
                        <div class="grid grid-cols-6 gap-6">
                            <div class="col-span-6 text-center">
                                <a href="{{ route("frontend.users.profileEdit") }}" wire:navigate>
                                    <div
                                        class="w-full rounded-sm border-2 border-gray-900 px-6 py-2 text-sm font-semibold text-gray-500 transition duration-200 ease-in hover:bg-gray-800 hover:text-white focus:outline-hidden"
                                    >
                                        @lang("Edit Profile")
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
